<template>
  <div class="detail">
    <span class="back" @click="$router.back()"
      ><van-icon name="arrow-left"
    /></span>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detailObj.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="center">
      <p>{{ detailObj.basicInfo?.name }}</p>
      <span class="dice">{{ detailObj.basicInfo?.characteristic }}</span>
      <section>
        <span
          ><i style="color: red">低价￥{{ detailObj.basicInfo?.minPrice }}</i>
          原价￥{{ detailObj.basicInfo?.originalPrice }}</span
        >
        <span>库存{{ detailObj.basicInfo?.stores }}</span>
      </section>
    </div>
    <p class="exce">商品介绍</p>
    <div class="exce_count" v-html="detailObj.content"></div>
  </div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon
      :icon="star ? 'star' : 'star-o'"
      :text="star ? '已收藏' : '未收藏'"
      color="#ff5000"
      @click="star = !star"
    />
    <van-action-bar-button type="warning" text="立即购买" />
    <van-action-bar-button
      type="danger"
      text="加入购物车"
      @click="show = true"
    />
  </van-action-bar>
  <!-- 规格的弹出层 -->
  <van-popup v-model:show="show" closeable position="bottom">
    <div class="pop_top">
      <img :src="detailObj.basicInfo?.pic" alt="" />
      <section>
        <p>{{ detailObj.basicInfo?.name }}</p>
        <span style="color: red">￥{{ price }}</span>
      </section>
    </div>
    <ul class="pop_center">
      <li v-for="(item, index) in detailObj.properties" :key="index">
        <p>{{ item.name }}</p>
        <ol>
          <li
            v-for="(n, i) in item.childsCurGoods"
            @click="checktype(n, index)"
            :class="{ active: tiesId[index] == n.id }"
          >
            {{ n.name }}
          </li>
        </ol>
      </li>
    </ul>
    <div class="pop_foot">
      <span>购买数量</span>
      <van-stepper v-model="buynum" />
    </div>
    <van-button type="danger" block @click="add">加入购物车</van-button>
  </van-popup>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import api from "../api/index";
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    const route = useRoute();
    let id = route.params.id;
    // console.log(id);
    const data = reactive({
      detailObj: {}, // 详情的数据
      star: false,
      show: false,
      price: 1, // 商品价格
      buynum: 1, // 购买数量
      ties: [], // 选中的规格
      tiesId: [], // 规格的id集合
    });
    api.post(`/shop/goods/detail?id=${id}`).then((res) => {
      data.detailObj = res.data;
    });

    const checktype = (val, i) => {
      // 规格的选取
      // console.log(val,i);
      data.ties[i] = val.name;
      data.tiesId[i] = val.id;
      api
        .post(
          `/shop/goods/price?goodsId=${id}&propertyChildIds=${data.tiesId.join(
            ","
          )}`
        )
        .then((res) => {
          data.price = res.data.price;
        });
    };
    const add = () => {
      // 加入购物车的函数
      if (data.ties.length == data.detailObj.properties.length) {
        let obj = {
          imgUrl: data.detailObj.basicInfo?.pic, // 图片
          name: data.detailObj.basicInfo?.name, // 商品名称
          buyNum: data.buynum, // 购买数量
          price: data.price, // 购买的单价
          isCheck: false,
          ties: data.ties.join(""),
        };
        store.commit('addCart',obj);
        data.show = false // 关闭弹窗
      } else {
        alert('请选择规格！')
      }
      //  console.log(obj);
    };
    return {
      ...toRefs(data),
      checktype,
      add,
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
  .my-swipe {
    img {
      width: 100%;
      height: 375px;
    }
  }
}
.back {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  z-index: 99;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-icon-arrow-left {
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    font-size: 25px;
  }
}
.center {
  background: #fff;
  padding: 5px 10px;
  p {
    line-height: 40px;
  }
  .dice {
    font-size: 12px;
    display: block;
    color: #999;
    margin: 5px 0;
  }
  section {
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    color: #999;
  }
}
.exce {
  margin-top: 10px;
  line-height: 50px;
  text-align: center;
  background: #fff;
}
:deep(.exce_count) {
  background: #fff;
  padding: 0 10px;
  .m-attrList p {
    overflow: hidden;
    font-size: 13px;
    line-height: 25px;
  }
  .img-lazyload {
    width: 100% !important;
    height: auto !important;
  }
}
.pop_top {
  display: flex;
  padding: 10px;
  img {
    height: 62px;
    width: 62px;
  }
  section {
    flex: 1;
    p {
      font-size: 13px;
      margin-bottom: 15px;
    }
  }
}
.pop_center {
  border-top: 1px solid #e9e9e9;
  padding: 10px 5px;
  font-size: 12px;
  p {
    line-height: 36px;
  }
  ol {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #d9d9d9;
      border-radius: 5px;
      padding: 5px 10px;
    }
    .active {
      border-color: red;
    }
  }
}
.pop_foot {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 13px;
  border-top: 1px solid #e9e9e9;
}
</style>